<template>
  <div class="home">
    <div id="demo1"></div>
    <textarea cols="90" rows="2" readonly v-model="editorData" v-show="isShow"></textarea>
  </div>
</template>

<script>

// 引入 wangEditor
import wangEditor from 'wangeditor'

export default {
  data () {
    return {
      editor: null,
      editorData: '',
      isShow: false
    }
  },
  props: {
    curClickProductInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    curClickProductInfo (val) {
      console.log(this.editorData)
    }
  },
  mounted () {
    const editor = new wangEditor(`#demo1`)
    editor.config.placeholder = '请输入商品详情'
    // 设置编辑区域高度为 150px
    editor.config.height = 150
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml
      this.$emit('getWangrditorData', this.editorData)
    }

    // 创建编辑器
    editor.create()
    editor.txt.html(this.curClickProductInfo.detail)

    this.editor = editor
  },
  methods: {
    getEditorData () {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html()
      alert(data)
    }
  },
  beforeDestroy () {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}
</script>

<style lang="less">
.home {
  width: 100%;
  position: relative;

  .btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px 10px;
    cursor: pointer;
  }
  h3 {
    margin: 30px 0 15px;
  }
}
</style>
